<template>
    <div class="Layout bg">
        <div class="header">
            <PayHeader :headers="Headers" logo="充值系统" />
        </div>
        <div class="navbar">
            <div class="input">
                <a-input-search
                    v-model:value="searchValue"
                    placeholder="input search text"
                    enter-button
                    @search="onSearch"
                />
            </div>
        </div>
        <div class="content">
            <a-table
                :labelWrap="true"
                :data-source="data.list"
                ::label-col="{width:'10px'}"
                :columns="columns"
                class="table"
                :pagination="paginationSet"
            >
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'action'">
                        <span>
                            <a-button type="primary" @click="payBoolean = true"
                                >充值</a-button
                            >
                            <a-divider type="vertical" />

                            <a-popconfirm
                                title="Are you sure?"
                                ok-text="Yes"
                                cancel-text="No"
                                @confirm="confirm1"
                                @cancel="cancel"
                            >
                                <a-button
                                    type="primary"
                                    @click="columnEdit(record.id)"
                                    >退费</a-button
                                >
                            </a-popconfirm>
                            <a-divider type="vertical" />
                            <a-popconfirm
                                title="Are you sure delete this task?"
                                ok-text="Yes"
                                cancel-text="No"
                                @confirm="confirm"
                                @cancel="cancel"
                            >
                                <a-button type="primary" danger>清零</a-button>
                            </a-popconfirm>
                        </span>
                    </template>
                </template>
            </a-table>
        </div>

        <a-modal
            v-model:open="payBoolean"
            title="充值"
            width="90%"
            @ok="onFinish"
            :model="electricPayForm"
        >
            <a-form
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                layout="horizontal"
                style="max-width: 600px"
            >
                <a-form-item label="设备编号">
                    <a-input v-model:value="electricPayForm.deviceCode" />
                </a-form-item>
                <a-form-item label="设备名称">
                    <a-input v-model:value="electricPayForm.deviceName" />
                </a-form-item>
                <a-form-item label="用户名称">
                    <a-input
                        v-model:value="electricPayForm.accountAffiliation"
                    />
                </a-form-item>
                <a-form-item label="剩余电费">
                    <a-input
                        v-model:checked="
                            electricPayForm.remainingElectricityBill
                        "
                    />
                </a-form-item>
                <a-form-item label="充值电费">
                    <a-input v-model:checked="electricPayForm.payBill" />
                </a-form-item>
                <a-form-item label="备注">
                    <a-input v-model:checked="electricPayForm.remarks" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import PayHeader from '@/components/Headers/payHeader.vue';
import { h, onMounted, reactive, ref } from 'vue';
import {
    message,
    TableColumnsType,
    TablePaginationConfig
} from 'ant-design-vue';
const Headers = [
    { to: '/power/index', text: '用电信息' },
    { to: '/repair', text: '用电分析' },
    { to: '/power/index', text: '数据报表' },
    { to: '/power/energyContrl', text: '节电管控' }
];

onMounted(() => {
    initdata({ current: 1, pageSize: 10 });
});

import { useApi } from '@/api';

const api = useApi();

const data = ref<FormListData<ElectricPayRes>>({
    total: 1000,
    current: 1,
    pageSize: 10,
    list: []
});
async function initdata({
    current,
    pageSize
}: {
    current: number;
    pageSize: number;
}): Promise<FormListData<ElectricPayRes>> {
    data.value = await api.electricList<FormListData<ElectricPayRes>>();

    console.log('======= data =======\n', data.value);

    return data.value;
}

//表格搜索
function onSearch(searchValue) {
    console.log('======= e =======\n', searchValue);
    data.value.list.map((item) => {
        if (item.accountAffiliation === searchValue) {
            return item;
        }
    });
}

const paginationSet: TablePaginationConfig = reactive({
    // ... 初始化你的分页配置
    total: data.value.total,
    current: data.value.current,
    pageSize: data.value.pageSize,

    position: ['bottomCenter'],
    // showTotal: total => `共 ${total} 条数据`,
    // showSizeChanger: true,
    pageSizeOptions: ['10', '15', '20'],
    onChange: (current, pageSize) => {
        //对其分页防抖
        initdata({ current, pageSize });
        paginationSet.current = current;
        message.success('点击了');
    },

    onShowSizeChange(current, pageSize) {
        paginationSet.pageSize = pageSize; // 修改每页显示的条数
        paginationSet.current = 1;
    }
});

const columns: TableColumnsType = [
    {
        title: '编号',
        dataIndex: 'id',
        key: 'id',
        width: 50,
        align: 'center'
    },
    {
        title: '设备编号',
        dataIndex: 'deviceCode',
        key: 'deviceCode',
        width: 100,
        align: 'center'
    },
    {
        title: '安装位置',
        dataIndex: 'installationPosition',
        key: 'installationPosition',
        width: 150,
        align: 'center'
    },

    {
        title: '设备类型',
        dataIndex: 'deviceType',
        key: 'deviceType',
        width: 150,
        align: 'center'
    },

    {
        title: '电费状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 120,
        customRender: ({ text, record, index, column }) => {
            console.log('======= text =======\n', text);
            if (text == 0) {
                return h('span', { style: { color: 'red' } }, '维修中');
            } else if (text == 1) {
                return h('span', { style: { color: 'green' } }, '已完成');
            }
        },
        filters: [
            {
                text: '维修中',
                value: 0
            },
            {
                text: '已完成',
                value: '已完成'
            }
        ],
        onFilter: (value, record) => record.status.startsWith(value)
    },

    {
        title: '剩余电费',
        dataIndex: 'remainingElectricityBill',
        key: 'remainingElectricityBill',
        width: 120,
        align: 'center'
    },
    {
        title: ' 计费类型',
        dataIndex: 'chargeType',
        key: 'chargeType',
        width: 100,
        align: 'center',
        ellipsis: true
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 250,
        align: 'center',
        ellipsis: true
    }
];
//Model
//编辑表单
const labelCol = { style: { width: '150px' } };
const wrapperCol = { span: 14 };
const payBoolean = ref(false);

const electricPayForm = ref({
    deviceCode: '123',
    deviceName: '485单相电表',
    accountAffiliation: '201宿舍',
    remainingElectricityBill: '50.00',
    payBill: '充值金额',
    remarks: ''
});

//
const searchValue = ref('');
function onFinish() {
    //发起请求
    message.success('充值成功');
}

function columnEdit(id) {
    console.log('======= id =======\n', id);
}
//删除
const cancel = (e: MouseEvent) => {
    console.log(e);
    message.error('Click on No');
};
const confirm = (e) => {
    console.log('======= e =======\n', e);
    message.success('删除成功');
};
const confirm1 = (e) => {
    console.log('======= e =======\n', e);
    message.success('退费成功');
};
</script>

<style scoped lang="scss">
@import '/src/assets/style/tableDeep.scss';
.bg {
    width: 100%;
    height: 100%;
    background: url('@/assets/icons/bg.png') no-repeat center 0px;
    background-position: center 0px;
    background-size: cover;
}

:global(.bg-alpha) {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.Layout {
    height: 100vh;
    width: 100%;

    .navbar {
        width: 100%;
        height: 60px;
        margin-left: 100px;
        margin-top: 10px;
        .input {
            width: 500px;
        }
    }
}

// #components-layout-demo-top-side-2 .logo {
//     float: left;
//     width: 120px;
//     height: 31px;
//     margin: 16px 24px 16px 0;
//     background: rgba(255, 255, 255, 0.3);
// }

// .ant-row-rtl #components-layout-demo-top-side-2 .logo {
//     float: right;
//     margin: 16px 0 16px 24px;
// }

// .site-layout-background {
//     background: #832020;
// }
</style>
